<template>
	<section>
		<!--start  面包屑-->
	    <div class="location">
	      <el-breadcrumb separator="/">
	        <el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
	        <el-breadcrumb-item>客户</el-breadcrumb-item>
	        <el-breadcrumb-item>客户列表</el-breadcrumb-item>
	        <el-breadcrumb-item>个人客户详情</el-breadcrumb-item>
	      </el-breadcrumb>
	    </div>
	     <!--start content-->
   		 <div class="content" id="content">
   		 	<!--重置密码-->
   		 		<div class="add">
				<transition name="fade">
					<div class="modal-backdrop" v-show="add"></div>
				</transition>
				<transition name="slideDown">
					<div class="specific-search" v-show="add">
						<div class="search-title">
							<p>重置密码</p>
						</div>
						<div class="form">
							<ul class="accoUL">
			   		 			<li>
			   		 				<em class="iconfont">&#xe708;</em><span>账号</span><input id="str"  disabled="disabled" />

			   		 			</li>
			   		 			<li>
			   		 				<em class="iconfont">&#xe708;</em><span>密码</span><input type="password" v-model="inpass" @blur="inpasswd"/>
			   		 				<p v-if="inpaww" style="text-align: left;text-indent: 80px;">密码为6-20位字母或数字！</p>
			   		 			</li>

			   		 			<li>
			   		 				<em class="iconfont">&#xe708;</em><span>重置密码</span><input type="password" v-model="inpasst" @blur="inpasstwo" />
			   		 				<p v-if="intwo" style="text-align: left;text-indent: 80px;">两次密码必须一至！</p>
			   		 			</li>

			   		 		</ul>
						</div>
						<div class="search-btn">
							<el-button type="primary" @click="psatijiao">确定</el-button>
							<el-button @click="add=false">取消</el-button>
						</div>
					</div>
				</transition>
			</div>
   		 	<!---->
   		 	<h2 style="color: #03b8cc;font-weight: normal;">个人信息</h2>


   		 	<div class="personal">
   		 		<div class="per-left">
   		 			<ul style="float: left;">
   		 				<li>
		   		 			<em class="iconfont">&#xe708;</em><span>姓名</span>
		   		 			<input class="inptwid" type="text" v-model="kName" /></br>
		   		 		</li>
		   		 		<li>
		   		 			<span>级别</span>
		   		 			<el-select v-model="value" placeholder="请选择">
							    <el-option
							      v-for="item in options"
							      :key="item.value"
							      :label="item.label"
							      :value="item.value">
							    </el-option>
							  </el-select>
		   		 		</li>
		   		 	<!--</ul>
		   		 	<ul style="float: left;margin-left: 50px;">-->
		   		 		<li>
		   		 			<em class="iconfont">&#xe708;</em><span>手机</span>
		   		 			<input class="inptdun" type="text" v-model="kphone"  @blur="yanshouji"  style="margin-right: 60px;" />
		   		 			<p v-if="inphone" style="text-align: left;text-indent: 80px;color: #f50;position: absolute;">手机格式不正确</p>
		   		 			<span>电话</span>
		   		 			<input class="inptdun" type="text"  v-model="tel"  /></br>
		   		 		</li>
		   		 		<li>
		   		 			<span>Email</span>
		   		 			<input class="inptdun" type="text" v-model="email"  style="margin-right: 64px;"  />
		   		 			<span>QQ</span>
		   		 			<input class="inptdun" type="text" v-model="qq"  /></br>
   		 				</li>
   		 			</ul>
   		 		</div>
   		 		<div class="per-right">
   		 			<span>头像</span>
   		 			<el-upload
					  class="avatar-uploader"
					  action="https://jsonplaceholder.typicode.com/posts/"
					  :show-file-list="false"
					  :on-success="handleAvatarSuccess"
					  :before-upload="beforeAvatarUpload">
					  <img v-if="imageUrl" :src="imageUrl" class="avatar">
					  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
   		 		</div>
   		 	</div>

   		 	<div class="persZh">
   		 		<div class="shenfen">
   		 			<span class="perSpan">身份证正面</span>
   		 			<el-dialog v-model="dialogVisible" size="tiny">
					  <img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
   		 			<el-upload
					  action="https://jsonplaceholder.typicode.com/posts/"
					  list-type="picture-card"
					  :on-preview="handlePictureCardPreview"
					  :on-remove="handleRemove">
					  <i class="el-icon-plus"></i>
					</el-upload>

   		 		</div>
   		 		<div class="">
   		 			<img src="../../../img/u676.png" />
   		 		</div>
   		 	</div>
   		 	<div class="persZh">
   		 		<div class="shenfen">
   		 			<span class="perSpan">身份证正面</span>
   		 			<el-upload
					  action="https://jsonplaceholder.typicode.com/posts/"
					  list-type="picture-card"
					  :on-preview="handlePictureCardPreview"
					  :on-remove="handleRemove">
					  <i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog v-model="dialogVisible" size="tiny">
					  <img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
   		 		</div>
   		 		<div class="">
   		 			<img src="../../../img/u678.png" />
   		 		</div>
   		 	</div>
   		 	<div class="account">
   		 		<h2 style="color: #03b8cc;font-weight: normal;">账号信息</h2>
   		 		<ul class="accoUL">
   		 			<li>
   		 				<em class="iconfont">&#xe708;</em><span>账号</span>
   		 				<input id="str" v-model="Account" disabled="disabled" />

   		 			</li>

   		 			<li class="accoUL-li">
   		 				<a style="cursor: pointer;" @click="add=true">重置密码</a>
   		 			</li>

   		 			<li style="text-align: left;">
   		 				<em class="iconfont">&#xe708;</em><span>账号状态</span>
   		 				<el-radio class="radio" v-model="radio" label="1" @click="redi='0'">开通</el-radio>
  						<el-radio class="radio" v-model="radio" label="2" @click="redi='1'">禁用</el-radio>
   		 			</li>
   		 		</ul>
   		 	</div>
   		 	<div class="caiwu">
   		 		<h2 style="color: #03b8cc;font-weight: normal;">财务信息</h2>
   		 		<ul class="accoUL" style="float: left;width: 620px;">
   		 			<li>
   		 				<span>开户名称</span><input  v-model="acctName" />
   		 			</li>
   		 			<li>
   		 				<span>银行账号</span><input  v-model="bankno" />
   		 			</li>
   		 			<li>
   		 				<span>发票抬头</span><input  v-model="invoice" />
   		 			</li>

   		 		</ul>
   		 		<ul class="accoUL" style="float: left;width: 650px;">
   		 			<li>
   		 				<span>开户银行</span><input  v-model="acctBank"/>
   		 			</li>
   		 			<li>
   		 				<span>纳税人识别号</span><input  v-model="Taxpayer" />
   		 			</li>

   		 		</ul>
   		 	</div>
   		 	<div class="queren" style="">
           <el-button type="primary" :disabled="clickBtn"  @click="upsave">保存</el-button>
		       <el-button @click="$router.push({path:'/kehu'})">取消</el-button>
   		 	</div>

   		 </div>
   		 <!--end content-->

	</section>
</template>


<script>
//	import * as kehuData from '../../../assets/data/kehu'
	export default {
      data() {
        return {
        	imageUrl: '',
        	dialogImageUrl: '',
        	dialogVisible: false,
        	checked: true,
        	inpu:false,
        	ovalue:'',
        	radio: '1',
        	redi:'0',
        	add:false,
        	inpass:'',				//密码
        	inpasst:'',				//确认密码
        	inpaww:false,
        	intwo:false,
        	inphone:false,			//手机格式是否正确
        	qunbu:true,			//必须输入的信息
        	modifData:[],
        	kName:'',      //客户姓名
        	kphone:'',		//手机
        	tel:'',			//电话
        	qq:'',			//qq
        	email:'',		//邮箱
        	Account:'',		//账户
        	positio:'',		//职位
        	acctName:'',		//开户名称
        	acctBank:'',        //开户银行
        	bankno:'',			//银行账号
        	Taxpayer:'',		//纳税人识别号
        	invoice:'',			//发票抬头
        	options: [{
	          value: '选项1',
	          label: '钻石vip'
	        }, {
	          value: '选项2',
	          label: '白金vip'
	        }, {
	          value: '选项3',
	          label: '黄金vip'
	        }, {
	          value: '选项4',
	          label: 'vip'
	        }, {
	          value: '选项5',
	          label: '普通'
	        }],
	        value: ''
		}

      },
      methods: {
//上传头像
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
//上传头像
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
//上传身份证
       handleRemove(file, fileList) {
        console.log(file, fileList);
      },
//上传身份证
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
//验证密码
	inpasswd(){
		var ostr=this.inpass.trim();
      	var reg=/^[a-zA-Z0-9]{6,20}$/;
			if (reg.test(ostr) != true){
				this.inpaww=true;
			}else{
				this.inpaww=false;
			}
	},
//验证两次密码是否一直
	inpasstwo(){
		if (this.inpass==this.inpasst) {
			this.intwo=false
		}else{
			this.intwo=true
		}
	},
//验证手机格式
	yanshouji(){
	//	alert("sjou")
		var ostr=this.kphone.trim();
      	var reg=/^1[34578]\d{9}$/;
		if (reg.test(ostr) != true){
			this.inphone=true;
		}else{
			this.inphone=false;
		}
	},
//提交修改信息
	upsave(){
		if(!this.inphone){
			this.axios({
				method: 'put',
				url: "/v3/basic/members/"+this.$store.state.modifynum,
				data:{
					"memberCode":this.$store.state.modifynum,	//确定要提交的客户编号客户编号
					"memberName":this.kName,					//提交姓名
					"operatorPhone":this.kphone,				//提交手机
					"operatorEmail":this.email,					//提交邮箱
					"operatorAccount":this.Account,				//提交账号
//					"operatorLoginPassword":this.paswod,		//提交密码
					"operatorQq":this.qq,						//提交QQ
					"operatorTel":this.tel,						//提交电话
					"dataBillstate":this.redi,
				}
			}).then((res) => {
				this.$notify({
			          title: '成功',
			          message: '修改客户成功！',
			          type: 'success'
			        });
				window.history.go(-1)
		    }).catch((err)=>{
			    this.Public.openError(this,err.response.data)
		    });
		}else{
			this.$message('输入信息不正确或不完整！');
		}

		},
//重置密码
	psatijiao(){
		if (this.inpass!='' && this.inpasst!='') {
			this.qunbu=false;
		} else{
			this.qunbu=true;
		}
		if (!this.inpaww && !this.intwo && !this.qunbu) {
			alert(666)
		} else{
			this.$message('输入正确的密码格式！');
		}
	}
    },
      mounted(){
      	var winHieg=document.documentElement.clientHeight;
      	var cont=document.getElementById("content");
    	cont.style.height = winHieg-110+"px";
      	console.log(winHieg);
      	this.axios({
				method: 'post',
				url: "/v3/basic/member/"+localStorage.getItem("memberCode"),
				data:{},
		}).then((res) => {
					this.modifData = res.data.memberOperatorViewVo;
					console.log(res.data);
					this.kName=this.modifData.memberName ;				//获取姓名
					this.kphone=this.modifData.operatorPhone ;			//获取手机号
					this.email=this.modifData.operatorEmail ;			//获取邮箱
					this.Account=this.modifData.operatorAccount;		//获取账号
//					this.tel=this.modifData.							//获取电话
//					this.positio=this.modifData.						//获取职位
//					this.acctName=this.modifData.						//获取开户名称
//					this.acctBank=this.modifData.						//获取开户银行
//					this.bankno=this.modifData.							//获取银行账号
//					this.Taxpayer=this.modifData.						//获取纳说人识别号
//					this.invoice=this.modifData.						//获取发票抬头
			}).catch((err)=>{
			    this.Public.openError(this,err.response.data)
		    });
   		},
	}
</script>

<style scoped>
	@import "../../../assets/css/zijin.css";
	/*body{
		overflow-y: auto!important;
	}*/
	.location{
		padding: 3px 0 15px 0;
	}
	.content{
		background: #fff;
		padding: 15px;
		/*height: 1850px;*/
		overflow: auto!important;
		font-family: "微软雅黑";
		position: relative;
		overflow: auto;
		min-width: 1330px;
	}
	.per-left{
		margin-left: 30px;
		float: left;
	}
	.per-left li{
		height: 55px;
		text-align: right;
	}
	.per-left li input{
		text-indent: 5px;height: 32px;border-radius:4px;border: 1px solid #cdd9e6 ;
	}
	.per-left li em,.accoUL li em{
		color: #f50;
	}
	.per-left li span{
		margin-right: 5px;
	}
	.per-left li .inptwid{
		width: 540px;
	}
	.per-left li .inptdun{
		width: 220px;
	}
	.personal{
		margin-top: 20px;
	}
/*上传头像*/
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  .avatar-uploader-icon {
  	border: 1px dashed #d9d9d9;
    font-size: 28px;
    color: #8c939d;
    width: 130px;
    height: 130px;
    line-height: 130px;
    text-align: center;
  }
  .avatar {
    width: 130px;
    height: 130px;
    display: block;
  }
	/*end*/
	.per-right{
		width: 300px;
		margin-left: 130px;
		float: left;
	}
	.per-right span{
		float: left;
		margin-right: 16px;
	}
	.persZh{
		clear: both;
		margin-left: 10px;
		margin-top: 20px;
		height: 128px;
	}
	.perSpan{
		float: left;
	}
	.el-upload{
		float: left;
	}
	.shenfen{
		width: 420px;
		float: left;
	}
	.el-upload--picture-card{
		width: 125px;
	    height: 125px;
	    line-height: 125px;
	}
	.accoUL{
		text-align: right;
		width: 620px;
		margin-top: 20px;
		margin-bottom: 60px;
	}
	.accoUL input{
		width: 540px;
		text-indent: 5px;height: 32px;border-radius:4px;border: 1px solid #cdd9e6 ;
	}
	.accoUL li span{
		margin-right: 10px;
	}
	.accoUL li{
		height: 60px;
	}
	.account{
		margin-top: 20px;
	}
	.account .accoUL-li{
		text-align: left;text-indent: 80px;
		height: 40px;
	}
	.accoUL-li span{
		display: inline-block;
		text-indent: 0;
		text-align: center!important;
		width: 120px;
		height: 20px;
		line-height: 22px;
		background: #e9ecf3;
		color: #fff;
		margin-right: 3px!important;
		font-size: 13px;
	}
	.accoUL p{
		color: #f50;
	}
	.queren{
		position: fixed;
		bottom: 0px;
		margin-left: -15px;
		width: 87%;
		background: #fff;
		height: 80px;
	}

	.queren a{
		display: inline-block;
		height: 32px;
		line-height: 32px;
		background: #fff!important;
		border: 1px solid #cdd9e6 ;
		color: #666!important;
		width: 80px;
		border-radius:20px;
		text-align: center;
		margin-top: 20px;
		margin-right: 20px;
		box-sizing: border-box;
	}
	.queren .baocun{
		color: #fff!important;
		background: #13C19F!important;
		z-index: 100;
		cursor: pointer;
		border: 0;
		margin-left: 30px;
	}
	.specific-search {
    position: fixed;
    width: 87%;
    top: 80px;
    left: 180px;
    padding: 30px;
    z-index: 1005;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 0 10px #ccc;
  }
  .search-title {
    font-size: 16px;
    border: 0;
    color: #415161;
  }
  .form {
    width: 1000px;
    background: #fff;
    margin: 20px 0;
  }
  .search-btn {
  	margin-top: 70px;
  }
  .specific-search {
  }
  .fade-enter-active, .fade-leave-active {
	transition: .4s;
  }
  .fade-enter, .fade-leave-active {
    opacity: 0;
  }
  .slideDown-enter-active, .slideDown-leave-active {
	transition: .4s;
  }
  .slideDown-enter, .slideDown-leave-active {
    height: 0;
    opacity: 0;
  }
  .content input:hover{
		border-color:#03B8CC ;
		transition: 0.5s;
	}
</style>
